import {
  Component,
  ContentChildren,
  EventEmitter,
  Input,
  Output,
  QueryList,
  ViewEncapsulation,
} from '@angular/core'
import { MatButton } from '@angular/material/button'
import { AdBaseGridContext } from 'monk-design/grid'
import { PageChange } from './interface/page-change'

@Component({
  selector: 'ad-pagination',
  template: `
    <ad-adaptive-layout>
      <ad-adaptive-wrapper-l>
        <div class="ad-pagination-wrapper">
          <ng-container *ngIf="enableSelectAll">
            <label
              *ngIf="gridContext"
              nz-checkbox
              [(ngModel)]="gridContext.isSelectAll"
              (ngModelChange)="gridContext.selectAllChange()"
              ><span [style.color]="'#86909C'">跨页全选(已选{{ selectSize }}项内容)</span></label
            >
            <label
              *ngIf="!gridContext"
              nz-checkbox
              [(ngModel)]="selectAll"
              (ngModelChange)="selectAllChange.emit(selectAll)"
              ><span [style.color]="'#86909C'">跨页全选(已选{{ selectSize }}项内容)</span></label
            >
          </ng-container>
          <span [style.color]="'#86909C'" [hidden]="enableSelectAll"
            >已选{{ selectSize }}项内容</span
          >
        </div>
      </ad-adaptive-wrapper-l>
      <ad-adaptive-wrapper-r>
        <nz-pagination
          [nzPageIndex]="currentPage"
          [nzShowQuickJumper]="nzShowQuickJumper"
          (nzPageIndexChange)="changePageBtn($event)"
          *ngIf="totalCount > 0 && onlyShowTotal === false"
          [nzPageSizeOptions]="nzPageSizeOptions"
          (nzPageSizeChange)="changePageSize($event)"
          [nzTotal]="totalCount"
          [nzShowSizeChanger]="nzShowSizeChanger"
          [nzPageSize]="pageSize"
          [nzShowTotal]="rangeTemplate"
          [nzSize]="nzSize"
        >
          <ng-template #rangeTemplate> 共 {{ totalCount }} 条 </ng-template>
        </nz-pagination>
        <div
          class="ad-pagination-wrapper"
          [style.justifyContent]="'flex-end'"
          *ngIf="onlyShowTotal"
        >
          共 {{ totalCount }} 条
        </div>
      </ad-adaptive-wrapper-r>
    </ad-adaptive-layout>
  `,
  encapsulation: ViewEncapsulation.None,
  host: {
    class: 'ad-pagination',
  },
})
export class AdPaginationComponent {
  /**
   * 是否开启跨页全选
   */
  @Input() enableSelectAll: boolean = false
  /**
   * 跨页全选状态 支持双向绑定
   */
  @Input() selectAll: boolean = false
  /**
   * 跨页全选状态变更事件
   */
  @Output() selectAllChange: EventEmitter<boolean> = new EventEmitter()
  /**
   * 数据总条目数量
   */
  @Input() totalCount: number = 0
  /**
   * 当前页码值
   */
  @Input() currentPage: number = 1
  /**
   * 每页条数
   */
  @Input() pageSize?: number = 50
  /**
   * 指定每页可以显示多少条
   */
  @Input() nzPageSizeOptions?: number[] = [10, 50, 100, 200, 500, 1000]
  /**
   * 是否可以快速跳转至某页
   */
  @Input() nzShowQuickJumper: boolean = true
  /**
   * 分页尺寸
   */
  @Input() nzSize: 'default' | 'small' = 'default'
  /**
   * 是否只显示条目数 隐藏分页器
   */
  @Input() onlyShowTotal: boolean = false
  /**
   * 是否可以改变 pageSize
   */
  @Input() nzShowSizeChanger: boolean = true
  /**
   * 分页器页码值 页数大小变更事件
   */
  @Output() pageChange: EventEmitter<PageChange> = new EventEmitter()
  /**
   * 表格状态对象
   */
  @Input() gridContext: AdBaseGridContext
  /**
   * 当前已选中数量
   */
  @Input() selectedLength: number = 0

  @Input() selectAllExcludeIdListSize: number = 0
  constructor() {}
  ngOnChanges() {
    this.currentPage = this.currentPage * 1
  }

  /**
   * 页码值变更
   * @param e
   */
  changePageBtn(e) {
    this.currentPage = e
    this.pageChange.emit({
      currentPage: this.currentPage,
      pageSize: this.pageSize,
    })
  }

  /**
   * 条目数变更
   * @param e
   */
  changePageSize(e?) {
    this.pageSize = e
    this.currentPage = 1
    this.pageChange.emit({
      currentPage: this.currentPage,
      pageSize: this.pageSize,
    })
  }

  get selectSize() {
    if (
      !this.enableSelectAll ||
      (this.gridContext && !this.gridContext.isSelectAll) ||
      (!this.gridContext && !this.selectAll)
    ) {
      return this.gridContext ? this.gridContext.selectedRows.length : this.selectedLength
    } else {
      const selectAllExcludeIdListSize = this.gridContext
        ? this.gridContext.selectAllExcludeIdList.length
        : this.selectAllExcludeIdListSize
      return this.totalCount - selectAllExcludeIdListSize
    }
  }
}
